<template>
	<view :style="width ? ('width: ' + width) : ''">
		<view @click="show = !show">
			<u-input v-if="type == 'input'" :value="showValue" type="text" :placeholder="placeholder" :border="border"></u-input>
			<view v-if="type == 'text'" class="text">{{showValue}} <u-icon name="arrow-right" size="24rpx"></u-icon> </view>
			<u-picker :show="show" :columns="[option]" :key-name="labelField" :confirm-text="$t('c.confirm')"
				:cancel-text="$t('c.cancel')" confirm-color="#033787" :item-height="80" close-on-click-overlay
				@confirm="confirm" @cancel="show = false">
			</u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: Number | String,
			option: Array,
			placeholder: String,
			type: {
				type: String,
				default: 'input'
			},
			border: {
				type: String,
				default: 'bottom'
			},
			labelField: {
				type: String,
				default: 'label'
			},
			idField: {
				type: String,
				default: 'id'
			},
			width: {
				type: String,
				default: '100%'
			}
		},
		model: {
			prop: 'value',
			event: 'model'
		},
		data() {
			return {
				show: false,
				showValue: '',
				defaultIndex: []
			}
		},
		mounted() {
			if (typeof this.value != 'undefined') {
				let select = this.option.find(v => {
					return v[this.idField] == this.value
				})
				if (select) {
					this.defaultIndex = [this.option.indexOf(select)]
					this.showValue = select[this.labelField]
				}
			}
		},
		methods: {
			confirm(val) {
				this.showValue = val.value[0][this.labelField]
				this.$emit('model', val.value[0][this.idField])
				this.$emit('@confirm', val.value[0])
				this.show = false
			}
		}
	}
</script>

<style>
	.text {
		display: flex;
	}
</style>